document.addEventListener('DOMContentLoaded', function() {
    const tableContainer = document.getElementById('multiplication-table');
    
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            const cell = document.createElement('div');
            cell.className = 'multiplication-cell';
            cell.textContent = `${i} × ${j} = ${i * j}`;
            cell.addEventListener('mouseenter', function() {
                this.style.backgroundColor = 'blue';
                this.style.color = 'white';
                this.style.transform = 'scale(1.05)';
            });
            cell.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '#ffffff';
                this.style.color = '#333';
                this.style.transform = 'scale(1)';
            });
            tableContainer.appendChild(cell);
        }
        tableContainer.appendChild(document.createElement('br'));
    }
});